<template>
    <div class="app" style="position: relative;">
        <div class="logo" style="position:absolute;left:10px;top:30px;font-weight:bolder;font-size:18px">
            表白墙
        </div>
        <div class="content" style="margin-top: 100px;">
            <div class="cards" v-for="card in pageCards" :key="card.id">
                <div class="card w-80 bg-base-100 shadow-xl" style="float: left;margin-left:40px;margin-top:30px"
                    v-if="card.Pic">
                    <div class="card-body">
                        <h2 class="card-title">{{ card.From }}的表白卡</h2>
                        <h3 class="card-desc" style="font-size: 15px;">TO {{ card.To }}</h3>
                        <p>{{ card.Body }}</p>


                        <div class="card-actions justify-end">

                            <div class="svg" style="position:relative;left:-130px;top:20px">
                                <svg t="1686324240725" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2426" width="16" height="16">
                                    <path
                                        d="M436.492516 162.206151c44.159431 35.26656 106.850987 35.26656 151.012693 0 110.437262-88.243769 260.100551-73.525476 343.442773-1.470009 104.741547 90.551182 104.741547 271.653547 0 452.753636-63.567644 117.766827-213.742933 235.531378-354.957084 323.7888a120.973084 120.973084 0 0 1-127.984071 0C306.792676 849.021156 156.615111 731.256604 93.047467 613.489778c-104.736996-181.100089-104.736996-362.202453 0-452.753636 83.344498-72.055467 233.007787-86.77376 343.445049 1.470009z"
                                        fill="#DD6767" p-id="2427"></path>
                                </svg>
                                <a style="color: #C63420;font-weight:bolder;position:relative;top:-20px;left:30px">{{
                                    card.Like.length
                                }}</a>
                            </div>

                            <button class="btn"
                                @click="() => $router.push('/card/' + card.Id).catch(err => { })">查看详情</button>
                        </div>
                    </div>
                    <figure><img :src="card.Pic" alt="404" />
                    </figure>
                </div>
                <div v-else class="card w-80 bg-accent text-primary-content"
                    style="float: left;margin-left:40px;margin-top:30px">
                    <!-- 卡片内容和样式（当pic为空时） -->
                    <div class="card-body">
                        <h2 class="card-title">{{ card.From }}的表白卡</h2>
                        <h3 class="card-desc" style="font-size: 15px;">TO {{ card.To }}</h3>
                        <p>{{ card.Body }}</p>
                        <div class="card-actions justify-end">
                            <div class="svg" style="position:relative;left:-130px;top:20px">
                                <svg t="1686324240725" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2426" width="16" height="16">
                                    <path
                                        d="M436.492516 162.206151c44.159431 35.26656 106.850987 35.26656 151.012693 0 110.437262-88.243769 260.100551-73.525476 343.442773-1.470009 104.741547 90.551182 104.741547 271.653547 0 452.753636-63.567644 117.766827-213.742933 235.531378-354.957084 323.7888a120.973084 120.973084 0 0 1-127.984071 0C306.792676 849.021156 156.615111 731.256604 93.047467 613.489778c-104.736996-181.100089-104.736996-362.202453 0-452.753636 83.344498-72.055467 233.007787-86.77376 343.445049 1.470009z"
                                        fill="#DD6767" p-id="2427"></path>
                                </svg>
                                <a style="color: #C63420;font-weight:bolder;position:relative;top:-20px;left:30px">{{
                                    card.Like.length
                                }}</a>
                            </div>


                            <button class="btn"
                                @click="() => $router.push('/card/' + card.Id).catch(err => { })">查看详情</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn-group-container">
                <div class="btn-group" style="margin-left:450px;overflow-x: auto;margin-top:50px;">
                    <div class="btn-container">
                        <button v-for="button in buttons" :key="button" class="btn btn-active"
                            @click="changePage(button)">{{
                                button }}</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import { getAllCards } from '../utils/LoveOnChain'

export default {
    name: "wall",
    data() {
        return {
            buttons: [],
            cards: [], //存储本人所有的卡片
            lenth: 0, //卡片的长度
            pageCards: [], //当前页面的卡片
        };
    },
    async created() {
        const result = await getAllCards()
        this.cards = result.map(card => {
            let newCard = { ...card };
            if (newCard.From.length > 20) {
                newCard.From = newCard.From.slice(0, 6) + '...' + newCard.From.slice(-4);
            }
            if (newCard.To.length > 20) {
                newCard.To = newCard.To.slice(0, 10) + '...' + newCard.To.slice(-7);
            }
            return newCard;
        });
        this.lenth = result.length //存储卡片的长度
        //按照每页六条数据 查看一共有多少页
        const page = Math.ceil(this.lenth / 6)
        for (let i = 1; i <= page; i++) {
            this.buttons.push(i)
        }
        //获取当前页面的卡片
        this.pageCards = this.cards.slice(0, 6);
    },
    methods: {
        //实现切换页码
        changePage(index) {
            this.pageCards = this.cards.slice((index - 1) * 6, index * 6);
        },
    }
}
</script>

<style scoped>
* {
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.app {
    top: 80px;
    width: 80%;
    float: right;
    height: 710px;
    overflow-y: auto;
}

.btn-group {
    overflow-x: auto;
    justify-content: center;
    margin-left: 350px;
    margin-top: 20px;
}

.btn-container {
    display: flex;
    width: 200px;
}

.btn-group-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
</style>